<div class="widgets">

  <div class="row">
    <div class="col-xs-12">
      <ba-card baCardClass="with-scroll">
        <div class="section">

          <form class="form-horizontal" (ngSubmit)="onSubmit()" #form="ngForm">
            <div class="form-group form-title row">
              <h2>重置密码</h2>
            </div>

            <div class="form-group row" [class.has-error]="userName.invalid && userName.dirty">
              <label for="userName" class="col-sm-3 control-label">用户名</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="userName" name="userName" required
                       [(ngModel)]="changeForm.userName" #userName="ngModel">
                <span [hidden]="userName.valid || userName.pristine" class="error-info">请填写用户名</span>
              </div>
            </div>

            <div class="form-group row" [class.has-error]="passOld.invalid && passOld.dirty">
              <label for="passOld" class="col-sm-3 control-label">原密码</label>

              <div class="col-sm-9">
                <input type="password" class="form-control" id="passOld" name="passOld" required
                       [(ngModel)]="changeForm.passOld" #passOld="ngModel">

                <span [hidden]="passOld.valid || passOld.pristine" class="error-info">请填写原密码</span>
              </div>
            </div>

            <div class="form-group row" [class.has-error]="passNew.invalid && passNew.dirty">
              <label for="passNew" class="col-sm-3 control-label">新密码</label>

              <div class="col-sm-9">
                <input type="password" class="form-control" id="passNew" name="passNew" maxlength="10" required
                       [(ngModel)]="changeForm.passNew" #passNew="ngModel">
                <span [hidden]="passNew.valid || passNew.pristine" class="error-info">请填写新密码</span>
              </div>
            </div>

            <div class="form-group row" [class.has-error]="passRepeat.invalid && passRepeat.dirty">
              <label for="passRepeat" class="col-sm-3 control-label">确认密码</label>

              <div class="col-sm-9">
                <input type="password" class="form-control" id="passRepeat" name="passRepeat" maxlength="10"  required
                       [(ngModel)]="changeForm.passRepeat" #passRepeat="ngModel">
                <span [hidden]="passRepeat.value === passNew.value" class="error-info">确认密码与新密码不一致</span>
              </div>
            </div>

            <div class="row col-sm-9 col-sm-offset-3 " >
              <span class="error-info pull-right">{{msg || errorMsg}}</span>
            </div>

            <div class="form-group row submitBtn">
              <div class="col-sm-12">
                <button type="submit" class="btn btn-auth pull-right" [disabled]="passRepeat.value != passNew.value || !form.form.valid">提交</button>
              </div>
            </div>
          </form>

        </div>
      </ba-card>
    </div>
  </div>
</div>
